<template>
<div class="rx-selectrx" @click.stop>
    <div>
        <rx-input 
        readonly 
        placeholder="请选择" 
        v-model="value" 
        @click.native="selectSwitch">
          <i slot="suffix"
          class="iconfont icon-xiala" 
          :class="isSelected?'is-rotate-end':'is-rotate-start'">
          </i>
        </rx-input>
    </div>
    <div  class="rx-selectrx-selt" :class="{'is-selected':isSelected}">
        <ul>
            <li v-for="(item, index) in lists" :key="index" @click="select(item)">{{item.name}}</li>
        </ul>
    </div>
</div>
    
</template>
<script>
export default {
  props:{
    lists:{
      type:Array,
      default:[]
    }
  },
  data() {
    return {
      value: "",
      isSelected: true
    };
  },
  methods: {
    selectSwitch() {
      this.isSelected = !this.isSelected;
    },
    select(item) {
      this.value = item.name;
      this.isSelected = !this.isSelected;
      this.$emit('input',this.value)
    }
  },
  watch:{
    isSelected:function(newd,oldd){
      var _this = this;
      if(newd ==false){
        document.body.onclick = function() {
        _this.isSelected = true;
      };
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.rx-selectrx {
  position: relative;
  display: inline-block;
  .is-rotate-end {
    display: block;
    transition: transform 0.3s;
    transform: rotate(0deg);
  }
  .is-rotate-start {
    display: block;
    transition: transform 0.3s;
    transform: rotate(-180deg);
  }
  ul {
    list-style: none;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid rgba(222, 228, 238, 1);
    li {
      width: 198px;
      height: 34px;
      line-height: 34px;
      text-indent: 20px;
      background-color: #ffffff;
      &:hover {
        background-color: rgba(228, 239, 255, 1);
      }
    }
  }
  .rx-selectrx-selt {
    position: absolute;
    z-index: 999;
  }
  .is-selected {
    display: none;
  }
}
</style>
